<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理-表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>菜单操作</legend>
        </fieldset>

        <form class="layui-form" action="" lay-filter="detail-form">
            <input type="hidden" name="id" :value="detail.id">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" :value="detail.title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" id="iconPicker" lay-filter="iconPicker">
                    <input type="hidden" name="icon" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单链接</label>
                <div class="layui-input-block">
                    <input type="text" name="href" lay-verify="title" :value="detail.href" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="authority" lay-verify="authority" :value="detail.authority" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" lay-verify="title" :value="detail.sort" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">上级菜单:</label>
                    <div class="layui-input-inline">
                        <select lay-verify="" lay-search="" id="treeMenu" name="pid">
                            <option value="">顶级菜单</option>
                            <option :value="item.id" v-for="item in treeMenu" :selected="item.id==detail.pid">{{item.title}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="显示" :checked="detail.id && detail.status===1">
                    <input type="radio" name="status" value="0" title="隐藏" :checked="detail.id && detail.status===0">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_menu" value="1" title="菜单" :checked="detail.is_menu==1 || detail.is_menu==null" />
                    <input type="radio" name="is_menu" value="0" title="按钮" :checked="detail.is_menu==0" />
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    Id = urlParam('id')
    new Vue({
        el:"#app",
        data:{
            detail:{
                id:null,
                title:null,
                icon:null,
                href:null,
                authority:null,
                sort:null,
                pid:null,
                status:null,
                is_menu:null,
            },
            treeMenu:[]
        },
        methods:{
            formRander:function(){
                layui.use(['form'],function(){
                    layui.form.render();
                })
            }
        },
        mounted:function(){
            var _this = this;
            layui.use(['form','iconPickerFa','jquery'], function () {
                var form = layui.form
                    , layer = layui.layer
                    ,iconPickerFa = layui.iconPickerFa
                    ,$ = layui.jquery;
                form.render();

                if (Id){ //编辑操作
                    $.get('/admin/menu/'+Id,{},function(res){
                        _this.detail = res.data
                        if (res.data.icon){
                            iconPickerFa.checkIcon('iconPicker', res.data.icon);
                            $('[name=icon]').val(res.data.icon)
                        }
                    });
                }

                iconPickerFa.render({
                    default:"fa fa-adjust",
                    elem: '#iconPicker',
                    type: 'fontClass',
                    url: "/lib/font-awesome-4.7.0/less/variables.less",
                    search: true,
                    page: true,
                    limit: 120,
                    cellWidth: '40px',
                    // 点击回调
                    click: function (data) {
                        $('[name=icon]').val("fa "+data.icon)
                    },
                    success: function(d) { // 渲染成功后的回调
                        $('.layui-anim.layui-anim-upbit').css({width:'1024px','max-height':'365px'})
                    }
                });

                $.get('/admin/menu/list',{},function(res){
                    var allMenus = res.data
                    function buildTreeMenu(allMenus , pid , level){
                        var arr = [];
                        for(var k in allMenus){
                            var v = allMenus[k];
                            if (v.pid == pid) {
                                v.level = level;
                                v.title = '|-- '.repeat(level) + v.title
                                arr.push(v)
                                var children = buildTreeMenu(allMenus,v.id, level + 1);
                                if (children.length>0){
                                    for(var k2 in children){
                                        arr.push(children[k2])
                                    }
                                }
                            }
                        }
                        return arr;
                    }
                    _this.treeMenu = buildTreeMenu(allMenus,0,0)
                })
                //监听提交
                form.on('submit(submit)', function (data) {
                    var formData = data.field;
                    if (Id){ //eidt
                        formData._method = 'put';
                        $.post('/admin/menu/'+Id,formData,function(res){
                            if (res.code===0){
                                layer.msg('success',{icon:6,time:500},function(){
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg,{icon:5})
                            }
                        })
                    } else { //add
                        $.post('/admin/menu/add',formData,function(res){
                            if (res.code===0){
                                layer.msg('success',{icon:6,time:500},function(){
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg,{icon:5})
                            }
                        })
                    }

                    return false;
                });

            });

        },
        updated:function(a,b,c){
            this.formRander();
        }
    })
</script>

</body>
</html>